<template>
	<view class="main-cont">
		<view class="box box-tb box-pack-center box-align-start">
			<video :src="stage.videoUrl" id="myVideo" controls autoplay class="video" @timeupdate="timeUpdate" ref="vueRef"
				:initial-time="initial_time" v-if="stage.videoUrl !=null"></video>
			<view class="content" v-if="stage.files.length !=0">
				<view class="" style="width: 100%;text-align: left;">
					学习资料
				</view>
				<view class="res-cont">
					<view class="list box box-align-center box-pack-start mr10" v-for="(item,index) in stage.files"
						@click="play(item)" :key="index">
						<u-image src="@/static/home/word.png" width="50rpx" height="50rpx"
							v-if="item.fileSuffix == `doc` || item.fileSuffix == `docx`"></u-image>
						<u-image src="@/static/home/ppt.png" width="36rpx" height="36rpx"
							v-if="item.fileSuffix == `ppt` || item.fileSuffix == `pptx`"></u-image>
							<u-image src="@/static/home/pdf.png" width="36rpx" height="36rpx"
								v-if="item.fileSuffix == `pdf`"></u-image>
						<view class="ml10 file-name">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
			<view class="text-cont">
				<view class="box box-align-center box-pack-start top">
					<view class="number">
						{{chapterIndex}}
					</view>
					<view class="ml5 p">
						{{chapterName}}
					</view>
				</view>
				<view class="text">
					{{stage.info == null?'暂无介绍':stage.info}}
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				stageid:0,
				sectionid:0,
				cousid:0,
				planid:0,
				stage:{
					info:''
				},
				chapterName: '',
				chapterIndex: '',
				dclass:uni.getStorageSync("dclass"),
				user:uni.getStorageSync("user"),
				
				video_real_time: 0, //实时播放进度
				nitial_time: '', //视频跳转进度 秒
				timer:null,
				progressVal:'',
				isReady:0,
				recordTime:'' //记录最后拖动前的时间
			}
		},
		watch: {
		    // 监听事件，发送进度
		    progressVal: function(val) {
				this.uploadProgress(val)
		    }
		},
		onLoad(opt) {
			//console.log(opt);
			this.sectionid = opt.id;
			this.cousid = opt.cousid;
			this.planid = opt.planid;
			this.getStageInfo();
			// //console.log(parseInt(opt.rate));
			if(parseInt(opt.rate) ==100 ) {
				this.isReady = 0
			}else{
				this.isReady = 1
				this.resetCurrentTime(this.resetTime(opt.time,opt.rate));
				this.initial_time = this.resetTime(opt.time,opt.rate) //视频进度
			}
			
		},
		onHide() {
			
		},
		methods: {
			resetTime(time,rate){
				// 时间转为毫秒
				let arr = time.split(':')
				// //console.log(arr);
				if(arr.length == 3){
					var hour = time.split(':')[0]
					var min = time.split(':')[1]
					var sec = time.split(':')[2]
					var s = Number(hour * 3600) + Number(min * 60) + Number(sec)
					return parseInt(s * parseInt(rate)/100) 
				}else if(arr.length == 2){
					var min = time.split(':')[0]
					var sec = time.split(':')[1]
					var s = Number(min * 60) + Number(sec)
					return parseInt(s * parseInt(rate)/100) 
				}else{
					return parseInt(time * parseInt(rate)/100) 
				}
				
			},
			resetCurrentTime(time){
				this.$nextTick(()=>{
					let videoContext = uni.createVideoContext('myVideo')
					videoContext.seek(parseInt(time))
				})
				
			},
			getStageInfo(){
				let opts = {
					url: '/ycousstage/getStageInfo',
					method: 'post'
				};
				let params = {
					sectionid: this.sectionid,
				};
				this.$api.post(opts, params).then(res => {
					//console.log(res);
					this.stage = res.data;
					this.chapterName = this.stage.title
					
					uni.setNavigationBarTitle({
					    title:`第${res.data.num}章 ${res.data.title}`
					});
					
					if(this.stage.num < 9){
						this.chapterIndex = `0${res.data.num}`
					}else{
						this.chapterIndex = `$${res.data.num}`
					}
				})
			},
			play(item) {
				const arr = ['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'pdf'];
				const isOk = arr.includes(item.fileSuffix);
				if (isOk) {
					uni.showLoading({
						title: "loading",
						icon: 'none'
					});
					uni.downloadFile({
						url: item.url,
						success: res => {
							//console.log(item.fileSuffix,res);
							var filePath = res.tempFilePath; // 1.下载文件获取临时地址
							uni.openDocument({
								filePath: filePath,
								fileType: item.fileSuffix,
								success: response => {
									//console.log(response);
									uni.hideLoading()
									// uni.showToast({
									// 	title: response.errMsg,
									// 	icon: 'none',
									// 	duration: 2000
									// });
								},
								fail:e=> {
									uni.hideLoading()
									uni.showToast({
										title: '暂不支持此类型',
										icon: 'none',
										duration: 2000
									});
								}
							});
						}
					});
				} else {}
			},
			timeUpdate: function(e) {
				// var isReady = 1; // 是否开启可以视频快进 1 禁止开启
				//跳转到指定播放位置 initial-time 时间为秒
				let that = this;
				//播放的总时长
				var duration = e.detail.duration
				//实时播放进度 秒数
				var currentTime = e.detail.currentTime
				//当前视频进度
				//console.log("视频播放到第" + currentTime + "秒")//查看正在播放时间，以秒为单位
				if (that.video_real_time == 0) {
					var jump_time = that.initial_time + that.video_real_time
				} else {
					var jump_time = that.video_real_time
				}
				// //console.log()//查看播放时间百分比，
				// //console.log(currentTime/duration)//查看正在播放时间
				if (that.isReady == 1) {
					//每隔三秒钟发送存储
					// //console.log((currentTime/duration).toFixed(2))//查看播放时间百分比，
					if (currentTime > jump_time && currentTime - jump_time > 3) {
						let videoContext = uni.createVideoContext('myVideo')
						videoContext.seek(that.video_real_time)
						uni.showToast({
							title: '未完整看完该视频，不能快进',
							icon: 'none',
							duration: 2000,
						})
						
					}else{
						that.progressVal = (currentTime/duration).toFixed(2)
						
					}
				}else{
					
				}
				that.video_real_time = currentTime //实时播放进度
			},
			//上传视频进度
			uploadProgress(val){
				//console.log(val == 1.00);
				if(val ==1.00){
					this.isReady = 0
				};
				let opts = {
					url: '/yclasscoustaskrecords/updateLooked',
					method: 'post'
				};
				let params = {
					planid:this.planid,
					classid:this.dclass.id,
					cousid:this.cousid,
					sectionid:this.sectionid,
					userid:this.user.id,
					bfb:val*100,
					looked:this.video_real_time
				};
				this.$api.post(opts, params).then(res => {
					
				})
				//console.log(this.isReady);
				
			}
		}
	}
</script>

<style scoped lang="scss">
	.main-cont {
		width: 100%;
		height: 100%;

		.video {
			width: 100%;
			height: 392rpx;
		}

		.content {
			width: 100%;
			padding: 39rpx 21rpx;
		}

		.res-cont {
			overflow-y: hidden;
			overflow-x: scroll;
			display: flex;
			white-space: nowrap;
			width: 100%;
			height: 140rpx;
			padding: 20rpx 0;

			.list {
				padding: 0 20rpx;
				width: 462rpx;
				// height: 108rpx;
				background: #FFFFFF;
				box-shadow: 0px 23rpx 46rpx 0px rgba(205, 207, 230, 0.18);
				border-radius: 20rpx;
				font-size: 27rpx;
				
				.file-name {
					width: 100%;
					  white-space:nowrap;/* 规定文本是否折行 */  
					  overflow: hidden;/* 规定超出内容宽度的元素隐藏 */
					  text-overflow: ellipsis;
				}
			}
		}

		.text-cont {
			margin: 0 auto;
			padding: 30rpx 14rpx;
			width: 722rpx;
			background: #FFFFFF;
			box-shadow: 0px 23rpx 46rpx 0px rgba(205, 207, 230, 0.18);
			border-radius: 20rpx;

			.top {
				height: 110rpx;
				border-bottom: 2rpx solid #F0F1F8;
			}

			.text {
				width: 100%;
				padding: 47rpx 37rpx;
			}
		}

		.number {
			width: 70rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			font-size: 34rpx;
			font-weight: bold;

			&:after {
				content: '';
				width: auto;
				width: 40rpx;
				height: 12rpx;
				background: #7C79F5;
				border-radius: 6rpx;
				display: block;
				margin-top: -32rpx;
				margin-left: 16rpx;
				z-index: 111111;
			}
		}

		.number+.p {
			font-size: 34rpx;
			font-weight: bold;
		}
	}
</style>
